<template>
  <section>
    <el-dialog
      :title="`${row.isView ? '查看' : row.id ? '编辑' : '新增'}汇总表`"
      :visible.sync="open"
      width="800px"
      append-to-body
      @close="cancel"
      custom-class="dialog-collect"
    >
      <div class="form-panel collect">
        <Form :formData="formData" :rulesData="rulesData" ref="collect" />
        <div class="plan-warp" v-if="row.isView">
          <div class="title">计划安排</div>
          <div class="content">
            <Form :formData="planData"  />
          </div>
        </div>
        <div class="file-warp form-panel" v-if="row.isView">
          <div class="title">附件文件</div>
          <div class="list">
            <div class="item" v-for="(item, index) in fileList" :key="index">
              <div class="name">{{ item.fileName }}</div>
              <div class="btns" @click="onDownLoad(item)">下载</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="(item, index) in formBtns"
          :key="index"
          @click="item.click"
          :type="item.type"
          >{{ item.label }}</el-button
        >
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { Rule } from "@/utils/rule.js";
import Form from "@/components/form/index.vue";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import { storage } from "@/utils/util.js";
import {
  vendorInfoDynamicForm,
  vendorInfoGetInfo,
  vendorInfoAdd,
  vendorInfoUpdate,
} from "@/api/collect/collect/index";
export default {
  props: {
    row: {
      type: Object,
      default: {},
    },
    hiddenBtns: {
      type: Boolean,
      default: false,
    },
    hiddenBtns: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Form,
  },
  data() {
    return {
      open: true,
      detail: { fileList: [] },
      formData: [],
      planData:[
        {
          prop: "applyReason",
          label: "检查事项",
          type: "textarea",
          rows: 3,
          value:'',
          disabled: true
        },
        {
          prop: "vendorName",
          label: "检查对象(企业全称)",
          type: "textarea",
          rows: 3,
          disabled: true
        },
        {
          prop: "checkAddress1",
          label: "检查/核查地点",
          type: "input",
          disabled: true
        },
        {
          prop: "checkRange",
          label: "佥查范围",
          type: "input",
          disabled: true
        },
        {
          prop: "followMember",
          label: "跟随学习",
          type: "input",
          disabled: true
        },
        {
          prop: "checkLeaderName",
          label: "检查组长",
          type: "input",
          disabled: true
        },
        {
          prop: "checkMember",
          label: "检查组员",
          type: "input",
          disabled: true
        }
      ],
      user: storage.getStorage("user") || {},
      rulesData: {
        bizNo: [Rule.checkDataNull("请输入受理编号", "blur")],
      },
      formBtns: [
        {
          label: "返回",
          click: () => {
            this.cancel();
          },
        },
        {
          type: "primary",
          label: "保存",
          click: () => {
            this.$refs.collect.$refs.form.validate((valid) => {
              if (valid) {
                this.loading = true;
                let parmas = this.$refs.collect.datas;
                if (parmas.checkAddress && parmas.checkAddress.length > 0) {
                  let checkAddress = [...parmas.checkAddress];
                  parmas.checkAddress =
                    CodeToText[checkAddress[0]] +
                    "/" +
                    CodeToText[checkAddress[1]] +
                    "/" +
                    CodeToText[checkAddress[2]];
                }
                if (this.row.id) {
                  parmas.id = this.row.id;
                  vendorInfoUpdate(parmas).then((response) => {
                    this.Message("编辑成功");
                    this.$emit("onBack", true);
                    this.loading = false;
                  });
                  return;
                }
                vendorInfoAdd(parmas).then((response) => {
                  this.Message("保存成功");
                  this.$emit("onBack", true);
                  this.loading = false;
                });
              }
            });
          },
        },
      ],
    };
  },
  created() {
    if (this.row.isView) {
      this.formBtns = [
        {
          label: "返回",
          click: () => {
            this.cancel();
          },
        },
      ];
    }
    if (this.hiddenBtns) {
      this.formBtns = [];
    }
  },
  mounted() {
    this.getTemplateForm();
  },
  methods: {
    //获取表单结构
    getTemplateForm() {
      this.loading = true;
      vendorInfoDynamicForm({deptId:this.row.deptId}).then((response) => {
        let data = response.data || [];
        data.forEach((item) => {
          if (item.prop == "checkAddress") {
            item.options = regionData;
          }
        });
        this.formData = data;
        this.loading = false;
        if (this.row.id) {
          this.getLoad();
        }
      });
    },
    //获取数据
    getLoad() {
      vendorInfoGetInfo({ id: this.row.id }).then((response) => {
        const data = response.data;
        this.detail = data;
        data.checkAddress1=data.checkAddress;
        if (data.checkAddress && data.checkAddress.includes("/")) {
          let checkAddress = data.checkAddress.split("/");
          // console.log(TextToCode);
          data["checkAddress"] = [
            TextToCode[checkAddress[0]].code,
            TextToCode[checkAddress[0]][checkAddress[1]].code,
            TextToCode[[checkAddress[0]]][checkAddress[1]][checkAddress[2]]
              .code,
          ];
        }
        this.formData = this.UpdataForm(data, this.formData, this.row.isView);
        this.planData = this.UpdataForm(data, this.planData, true);
      });
    },
    // 关闭
    cancel() {
      this.$emit("onBack", false);
    },

    //下载文件
    onDownLoad(item) {
      window.open(item.fileUrl);
    },
  },
};
</script>

<style lang="scss">
@import "../../../assets/styles/collect.scss";
.dialog-collect {
  .el-dialog__body {
    height: 530px;
    overflow-y: auto;
  }
}

.collect {
  padding: 30px 0;
  .el-date-editor {
    width: 100% !important;
  }
  .form {
    display: flex;
    flex-flow: row wrap;
  }
}
</style>
